<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <style>
		#app{
			margin: 0 auto;
			border: 1px solid cornflowerblue;
			border-radius: 5px;
		}
		.clear{
			display: table;
			content: "";
			clear: both;
		}
		.box{
			padding: 5px;
			box-sizing: border-box;
		}
		.box input {
			border: none;
			border-bottom: 1px solid crimson;
			outline: none;
		}
		.box input:nth-of-type(3){
			border: none;
			text-align: center;
			width:100px;
			height: 30px;
			border-radius:20px;
		}
		::placeholder{
			text-align: center;
			font-family: 宋体;
		}
		.banner{
			border: 1px solid orchid;
			border-radius: 5px;
			margin: 5px 30px 3px 30px;
		}
    </style>
</head>
<body>
	<center>
		<div id="app" class="clear" >
		   <div class="box">
		       <input v-model='title' type="text" placeholder="请输入标题">
		       <input type="text"  v-model='content' placeholder="请输入内容">
			   <hr>
			   <input type="button" @click="add" value="确定" />
		   </div>
		   
		   
		    <div class="banner" v-for="(i,index) of list" :key="index" >
		        {{i.title}}----{{i.content}}
				<input type="button" @click="del(index)" value="删除" style="border:none;font-size: 10px;outline: none;"/>
		    </div>
		</div>
	</center>
<script>
    // 双向绑定
    var vm = new Vue({
        el:'#app',
        data:{
            title:'',
            content:'',
            list:JSON.parse(localStorage.getItem('list')) || []
        },
        methods:{
			del:function(num){
				this.list.splice(num, 1);
			},
            add:function(){
                console.log(this.title)
                if (this.title.length>0&&this.content.length>0){
                    var item = {
                        title:this.title,
                        content: this.content
                    }
                    //保存这个笔记
					
                    this.list.push(item)  
					
					
					//放到数组里面去
                    // localStorage 本地存储
                    // localStorage.setItem('list',数据)
                    // localStorage.list = this.list
                    //  localStorage.getItem('list')
                    // var i = localStorage.list
                    // localStorage.setItem('list',JSON.stringify(this.list))
					
					
					
                }else {
                    alert('！！！！！')
                }
            }
        }
    })
</script>
</body>
</html>
